<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>business_add</title>
    <link rel="stylesheet" href="../../../static/layer/css/layui.css" media="all"/>
    <style>
        .view-form .layui-input-block {
            line-height: 36px;
            background: #eeeeee;
            padding-left: 20px;
            font-size: 16px;
        }
        .layui-form-label {
            width: 120px;
        }
        .layui-input-block {
            margin-left: 150px;
        }
        #allmap {
            width:100%;
            height:500px;
            margin-top: 10px;
        }
    </style>
    <!-- 百度地图 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VoGWsEzA2kr5G981Lt3EgNUhREBz4KsW"></script>
</head>

<body>
<div style="padding: 20px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">商圈名称：</label>
            <div class="layui-input-block">
                <input type="text" name="BUSINESS_NAME" lay-verify="required" placeholder="请输入商圈名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <!--<div class="layui-form-item">
            <label class="layui-form-label">商圈面积(万m²)：</label>
            <div class="layui-input-block">
                <input type="number" name="BUSINESS_AREA" lay-verify="required" placeholder="请输入商圈面积" autocomplete="off"
                       class="layui-input">
            </div>
        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">商圈位置：</label>
            <div class="layui-input-block">
                <input type="text" id="suggestId" name="BUSINESS_ADDRESS" lay-verify="required" placeholder="请输入商圈位置"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-block">
                <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                <div id="allmap"></div>
            </div>
        </div>
        <div style="display: none;" class="layui-form-item">
            <label class="layui-form-label">位置经度：</label>
            <div class="layui-input-block">
                <input type="number" id="lng" name="BUSINESS_LNG" lay-verify="" placeholder="请输入位置经度" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div style="display: none;" class="layui-form-item">
            <label class="layui-form-label">位置纬度：</label>
            <div class="layui-input-block">
                <input type="number" id="lat" name="BUSINESS_LAT" lay-verify="" placeholder="请输入位置纬度" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商圈图片：</label>
            <div class="layui-input-block layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多图片</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>缩略图</th>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用：</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="IS_OPEN" lay-skin="switch" lay-filter="switchTest"
                       lay-text="启用|关闭">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息：</label>
            <div class="layui-input-block">
                <textarea name="BUSINESS_INFO" placeholder="请输入备注信息" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item operate-button-group">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="business">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="../../../static/js/common/queryUtils.js"></script>
<script type="text/javascript" src="../../../static/layer/layui.js"></script>
<script type="text/javascript" src="../../../static/ujs/admin/map.js"></script>
<script>
    var uploadfiles = new Array(); // 要上传的文件列表路径
    var $;

    layui.use(['jquery', 'form', 'layer', 'upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;
        $ = layui.jquery;

        //多文件列表示例
        var files;
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: '/servlet/UploadHandleServlet'
            // ,accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            , choose: function (obj) {
                files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img"></td>'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                        return false;
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                    });

                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if (res.errcode == 0) { //上传成功
                    var obj = {};
                    obj.name = res.data.fileName;
                    obj.size = res.data.fileSize;
                    obj.ext = res.data.extName;
                    obj.url = res.data.fileUrl;
                    uploadfiles.push(obj);
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(4).html(''); //清空操作
                    delete files[index]; //删除文件队列已经上传成功的文件
                    return;
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

        //操作类型：add新增，edit修改，view查看
        var operateType = QueryUtils.GetQueryString("type");
        var id = QueryUtils.GetQueryString("id");
        switch (operateType) {
            case "add":
                break;
            case "edit":
                $.ajax({
                    url: "/business/info",
                    data: {ID: id},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            // 初始化附件
                            var attachments = res.attachmentData;
                            if (!!attachments) {
                                var host = location.host;
                                for (var i = 0; i < attachments.length; i++) {
                                    var attachment = attachments[i];
                                    var demoListView = $('#demoList');
                                    var tr = $(['<tr id="upload-' + (i + 1) + '">'
                                        , '<td><img src="http://' + host + '/' + attachment.PATH + '" alt="' + attachment.NAME + '" class="layui-upload-img"></td>'
                                        , '<td>' + attachment.NAME + '</td>'
                                        , '<td>' + (attachment.SIZE / 1014).toFixed(1) + 'kb</td>'
                                        , '<td><span style="color: #5FB878;">上传成功</span></td>'
                                        , '<td>'
                                        , '<a onclick=\'operate.deleteImg(this, "' + attachment.ID + '");\' class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</a>'
                                        , '</td>'
                                        , '</tr>'].join(''));
                                    demoListView.append(tr);

                                    var obj = {};
                                    obj.id = attachment.ID;
                                    obj.name = attachment.NAME;
                                    obj.size = attachment.SIZE;
                                    obj.ext = attachment.EXT;
                                    obj.url = attachment.PATH;
                                    uploadfiles.push(obj);
                                }
                            }

                            $("input[name='BUSINESS_NAME']").val(res.data.BUSINESS_NAME);
                            $("input[name='BUSINESS_AREA']").val(res.data.BUSINESS_AREA);
                            $("input[name='BUSINESS_ADDRESS']").val(res.data.BUSINESS_ADDRESS);
                            $("input[name='BUSINESS_LNG']").val(res.data.BUSINESS_LNG);
                            $("input[name='BUSINESS_LAT']").val(res.data.BUSINESS_LAT);
                            setPlaceEdit(res.data.BUSINESS_LNG, res.data.BUSINESS_LAT);
                            if (res.data.IS_OPEN === "on") {
                                $("input[name='IS_OPEN']").parent().html('<input type="checkbox" checked="" name="IS_OPEN" lay-skin="switch" lay-filter="switchTest" lay-text="启用|关闭">');
                            } else if (res.data.IS_OPEN === "off") {
                                $("input[name='IS_OPEN']").parent().html('<input type="checkbox" name="IS_OPEN" lay-skin="switch" lay-filter="switchTest" lay-text="启用|关闭">');
                            }
                            $("textarea[name='BUSINESS_INFO']").val(res.data.BUSINESS_INFO);
                            form.render();
                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
                break;
            case "view":
                $.ajax({
                    url: "/business/info",
                    data: {ID: id},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            $("#testList").remove();
                            $("#testListAction").remove();
                            // 初始化附件
                            var attachments = res.attachmentData;
                            if (!!attachments) {
                                var host = location.host;
                                for (var i = 0; i < attachments.length; i++) {
                                    var attachment = attachments[i];
                                    var demoListView = $('#demoList');
                                    var tr = $(['<tr id="upload-' + (i + 1) + '">'
                                        , '<td><img src="http://' + host + '/' + attachment.PATH + '" alt="' + attachment.NAME + '" class="layui-upload-img"></td>'
                                        , '<td>' + attachment.NAME + '</td>'
                                        , '<td>' + (attachment.SIZE / 1014).toFixed(1) + 'kb</td>'
                                        , '<td><span style="color: #5FB878;"></span></td>'
                                        , '<td>'
                                        , '</td>'
                                        , '</tr>'].join(''));
                                    demoListView.append(tr);

                                    var obj = {};
                                    obj.name = attachment.NAME;
                                    obj.size = attachment.SIZE;
                                    obj.ext = attachment.EXT;
                                    obj.url = attachment.PATH;
                                    uploadfiles.push(obj);
                                }
                            }

                            $(".layui-form").addClass("view-form");
                            $("input[name='BUSINESS_NAME']").parent().html(res.data.BUSINESS_NAME);
                            $("input[name='BUSINESS_AREA']").parent().html(res.data.BUSINESS_AREA);
                            $("input[name='BUSINESS_ADDRESS']").parent().html(res.data.BUSINESS_ADDRESS);
                            $("input[name='BUSINESS_LNG']").parent().html(res.data.BUSINESS_LNG);
                            $("input[name='BUSINESS_LAT']").parent().html(res.data.BUSINESS_LAT);
                            setPlaceEdit(res.data.BUSINESS_LNG, res.data.BUSINESS_LAT);
                            if (res.data.IS_OPEN === "on") {
                                $("input[name='IS_OPEN']").parent().html("开启");
                            } else if (res.data.IS_OPEN === "off") {
                                $("input[name='IS_OPEN']").parent().html("关闭");
                            }
                            $("textarea[name='BUSINESS_INFO']").parent().html(res.data.BUSINESS_INFO);
                            $(".operate-button-group").remove();
                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
                break;
        }


        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            if (this.checked === true) {
                layer.tips('温馨提示：保存成功后商圈立即启用' + '', data.othis);
            } else if (this.checked === false) {
                layer.tips('温馨提示：保存成功后商圈需开启后可用' + '', data.othis);
            }
        });

        //监听提交
        form.on('submit(business)', function (data) {
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });*/
            if (!data.field.IS_OPEN) {
                data.field.IS_OPEN = "off"; //如果是否开启为未开启则设置为off
            }
            if (operateType === "add") {
                var sdata = {};
                sdata.BUSINESS = data.field;
                sdata.ATTACHMENT = uploadfiles;
                var sendData = {};
                sendData.DATA = JSON.stringify(sdata);

                layer.msg('确认保存商圈吗', {
                    time: 0
                    , btn: ['确定', '取消']
                    , shade: 0.3
                    , yes: function (index) {
                        layer.close(index); // 关闭当前提示框
                        $.ajax({
                            url: "/business/save",
                            data: sendData,
                            dataType: "json",
                            type: "post",
                            async: false,
                            success: function (res) {
                                if (res.errcode === "0") {
                                    var i = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(i);  // 关闭新建商圈页面
                                    parent.layui.table.reload('businessTable', {});
                                    parent.layer.msg("保存成功", {offset: '150px'});   // 父页面弹出保存成功
                                } else if (res.errcode === "1") {
                                    layer.msg(res.errmsg, function () {
                                    });
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                console.error(XMLHttpRequest.status);
                                console.error(XMLHttpRequest.readyState);
                                console.error(textStatus);
                            }
                        });
                    }
                });
            } else if (operateType === "edit") {
                data.field.ID = id;
                var sdata = {};
                sdata.BUSINESS = data.field;
                sdata.ATTACHMENT = uploadfiles;
                var sendData = {};
                sendData.DATA = JSON.stringify(sdata);
                layer.msg('确认保存商圈吗', {
                    time: 0
                    , btn: ['确定', '取消']
                    , shade: 0.3
                    , yes: function (index) {
                        layer.close(index); // 关闭当前提示框
                        $.ajax({
                            url: "/business/edit",
                            data: sendData,
                            dataType: "json",
                            type: "post",
                            async: false,
                            success: function (res) {
                                if (res.errcode === "0") {
                                    var i = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(i);  // 关闭修改商圈页面
                                    parent.layui.table.reload('businessTable', {});
                                    parent.layer.msg("修改成功", {offset: '150px'});   // 父页面弹出修改成功
                                } else if (res.errcode === "1") {
                                    layer.msg(res.errmsg, function () {
                                    });
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                console.error(XMLHttpRequest.status);
                                console.error(XMLHttpRequest.readyState);
                                console.error(textStatus);
                            }
                        });
                    }
                });
            }
            return false;
        });

    });

    var operate = {
        deleteImg: function (obj, id) {
            $(obj).parent().parent().remove();
            for (var i = 0; i < uploadfiles.length; i++) {
                if (uploadfiles[i].id == id) {
                    uploadfiles.splice(i, 1);
                }
            }
        }
    }

</script>
</body>

</html>